<template>
  <!-- 展期申请查询 -->
  <section class="page extension-apply-query">
    <data-form :model="searchModel" @onSearch="refreshData" :page="pageService" >
      <template slot="inputs">
        <el-form-item label="借据号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="applyRealName">
          <el-input v-model="searchModel.applyRealName"></el-input>
        </el-form-item>
        <el-form-item label="系统来源" prop="sysCode">
            <el-select v-model="searchModel.sysCode" placeholder="请选择" clearable>
                <el-option v-for="{index,name,code} in $dict.getDictData('SysCode')" :key="index" :label="name" :value="code"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="applyStatus">
            <el-select v-model="searchModel.applyStatus" placeholder="请选择" clearable>
                <el-option v-for="{index,name,code} in $dict.getDictData('ApplyStatus')" :key="index" :label="name" :value="code"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="applyTime">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.applyTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
        <template slot="columns">
        <!--数据列区域-->
            <el-table-column label="操作" :min-width="$helper.getColumnWidth(5)">
            <template slot-scope="scope">
                <el-button type="text" @click="rowData=scope.row,dialog.leaveApproval = true">查看</el-button>
            </template>
            </el-table-column>
            <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="personalName" label="客户名称" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sysCode" label="系统来源" :formatter="(row) => $filter.encryptSysCode(row.sysCode)" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="applyRealName" label="申请人" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" :formatter="(row) => $filter.dateTimeFormat(row.applyTime)" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="applyStatus" label="状态" :formatter="(row) => $filter.dictConvert(row.applyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
            </el-table-column>         
            <el-table-column prop="overdueCapital" label="逾期本金余额" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
            </el-table-column>         
            <el-table-column prop="applyCategory" label="调整类型" :formatter="(row) => $filter.dictConvert(row.applyCategory,'ApplyCategory')" :min-width="$helper.getColumnWidth(7)" show-overflow-tooltip>
            </el-table-column>         
        </template>
    </data-box>
    <!-- 查看审核记录 -->
    <el-dialog title="审核记录" :visible.sync="dialog.leaveApproval" width="800px" :close-on-click-modal="false">
      <query-common ref='query-common' @openViewAttachList="openViewAttachList" :rowData="rowData" @close="dialog.leaveApproval=false;refreshData()"></query-common>
    </el-dialog>
    <!-- 查看附件 -->
    <el-dialog title="附件信息" :center="true" :visible.sync="dialog.fileList" width="800px" append-to-body>
      <view-attach-list :fileIds="rowData.fileIds?rowData.fileIds:''" @close="dialog.fileList = false"></view-attach-list>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import QueryCommon from '~/components/synthesize-query-manage/query-common.vue';
import ViewAttachList from "~/components/common/view-attach-list.vue";
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service";
import { namespace, Getter, Mutation } from "vuex-class";


@Layout("workspace")
@Component({
  components: {
    DataForm,
    DataBox,
    NumberRange,
    ViewAttachList,
    QueryCommon
  }
})
export default class ExtensionApplyQuery extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(SortService) private sortService: SortService;
  @Dependencies(SynthesizeQueryService)
  private synthesizeQueryService: SynthesizeQueryService;

  private searchModel: any = {
    caseNumber: "",
    applyRealName: "",
    sysCode: "",
    applyStatus: "",
    applyTime: [],
    type:1 //展期申请查询type为1
  };

  private dataSet: any[] = [];
  private rowData: any = '';
  private dialog: any = {
    leaveApproval: false,
    fileList:false
  };
  //查看策略
  private openViewAttachList(val){
    this.dialog.fileList = true
  }
  private refreshData() {
    this.synthesizeQueryService
      .getDerateInfo(this.searchModel,this.pageService)
      .subscribe(data => (this.dataSet = data));
  }

  private mounted() {
    this.refreshData();
  }
  
}
</script>
<style lang="less">
</style>
